<template>
  <div>
    <div class="main-container">
      <div id="goToHere"></div>
      <div class="a-container" :key="item.id" v-for="(item) of imgList">
        <div class="img-container">
          <img :src="item.thumbnail"
               style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%" alt="1">
          <div class="img-info">{{item.title}}</div>
          <div class="action-bar">
            <span>
              <i class="el-icon-download img-btn" @click="doDownload(item.imgPath)"></i>
            </span>
            <span>
              <i class="el-icon-star-off img-btn" @click="doAddLike(item)"></i>
            </span>
          </div>
        </div>
      </div>
      <div style="clear: left"></div>
      <div class="loading-container">
        <i class="el-icon-refresh-right refresh-btn" :class="{'loading-data': isLoading}" @click="loadRand4Img"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {AppImgBaseUrl} from '../utils/AppConstant'
import {diImg} from '../utils/downloadImg'

export default {
  name: 'Home',
  data () {
    return {
      isLoading: false,
      imgList: [] // {id, title, imgPath, happenedDate}
    }
  },
  computed: {
    userName: function () {
      return ''
    }
  },
  created () {
  },
  mounted () {
    this.loadRand4Img()
  },
  methods: {
    loadRand4Img () {
      if (this.isLoading) {
        return
      }
      const loadingRef = this.$loading({
        lock: true,
        text: '拼命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(153, 153, 153, 0.7)'
      })
      this.isLoading = true
      this.$get('api/Index/randomImage').then(list => {
        this.parseImgList(list)
        document.querySelector('#goToHere').scrollIntoView(true)
      }).finally(() => {
        this.isLoading = false
        loadingRef.close()
      }).catch()
    },
    parseImgList (list) {
      this.imgList.splice(0, this.imgList.length)
      let count = 0
      list.forEach(tmpV => {
        count = count + 1
        tmpV.img_url = AppImgBaseUrl + tmpV.imgPath
        tmpV.thumbnail = AppImgBaseUrl + 'thumbnail_' + tmpV.imgPath
        this.imgList.push(tmpV)
      })
    },
    doAddLike (item) {
      if (this.$store.getters.isLogined === false) {
        this.$router.push({name: 'Login'})
        return false
      }

      this.isLoading = true
      this.$post('api/MyLikeVc/likeOrNotImg', {imgId: item.id, isAddToLike: 1}).then(resp => {
        this.$message.success('操作成功')
      }).finally(() => {
        this.isLoading = false
      })
    },
    doDownload (imgPath) {
      if (this.$store.getters.isLogined === false) {
        this.$router.push({name: 'Login'})
        return false
      }

      const isStarted = diImg(imgPath)
      if (isStarted === false) {
        this.$message.error('操作失败, 请下载DI Manager客户端来设置桌面壁纸')
      }
    }
  }
}
</script>

<style scoped>
  .main-container {
    position: relative;
    overflow: auto;
    height: 100vh;
    right: -14px;
    left: 0px;
  }

  .loading-container {
    height: 60px;
    line-height: 60px;
    text-align: center
  }

  .refresh-btn {
    display: inline-block;
    padding: 4px;
    font-size: 30px;
  }

  .refresh-btn:hover {
    /*transform: scale(1.4, 1.4);*/
    /*transform: rotate(360deg);*/
    /*transition: 1s;*/
  }

</style>
